<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>主页</title>
  <link rel="stylesheet" href="../../layuimini/lib/layui-v2.5.5/css/layui.css" media="all" />

  <style>
    .padding1{
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <div style="display: block">
        <div class="padding1">
          <blockquote class="layui-elem-quote">
            <div>
              <h1 id="uname"></h1>
            </div>
  
          </blockquote>
        </div>

        <div class="padding1">
          <blockquote class="layui-elem-quote">
            <div style="display: flex">
              <div>
                <h2 id="showTime"></h2>
              </div>
            </div>
          </blockquote>
        </div>
        <!-- 登录信息 -->
        <div class="padding1">
          <blockquote class="layui-elem-quote">
            <h2>登录信息</h2>
          </blockquote>
          <fieldset class="layui-elem-field layui-field-title">
            <div class="layui-card">
              <div class="layui-card-body layui-text">
                <table class="layui-table">
                  <colgroup>
                    <col width="30%" />
                    <col />
                  </colgroup>
                  <tbody>
                    <tr>
                      <td>登录用户</td>
                      <td id="user"></td>
                    </tr>
                    <tr>
                      <td>登录IP</td>
                      <td id="ip"></td>
                    </tr>
                    <tr>
                      <td>登录时间</td>
                      <td id="time"></td>
                    </tr>
                    <tr>
                      <td>登录地点</td>
                      <td id="address"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </fieldset>
        </div>

      </div>
    </div>
  </div>

  <script src="../../layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
  <script src="../../layuimini/js/lay-config.js" charset="utf-8"></script>

  <script>
    layui.use(
      ["jquery", "layer", "miniAdmin", "miniTongji", "common"],
      function () {
        var $ = layui.jquery,
          layer = layui.layer,
          miniAdmin = layui.miniAdmin,
          miniTongji = layui.miniTongji,
          common = layui.common;

        layer.ready(function () {
          var timer = window.setInterval(() => {
            document.getElementById("showTime").innerHTML =
              common.getCurrentTime();
          }, 1000);

          // 登录用户
          common.ajax(common.api + "/user/name", null, function (data) {
            document.getElementById("user").innerHTML = data.data;
            document.getElementById("uname").innerHTML = "欢迎用户"+data.data+"登录！";
            document.getElementById("time").innerHTML =
                common.getCurrentTime();

          });

          // 登录IP等信息
          fetch("http://ip-api.com/json/")
            .then((response) => response.json())
            .then((data) => {
              console.log(111, data);
              document.getElementById("ip").innerHTML = data.query;
              document.getElementById("address").innerHTML =
                data.regionName + " / " + data.country;
              
            });

          
          
        });
      }
    );
  </script>
</body>

</html>